<template>
  <div class="home-wrapper">
    <div class="scroll-wrapper" ref="scrollWrapper">
      <div class="top">
        <!-- 背景 -->
        <swiper :options="swiperOption" class="top-swiper">
          <swiper-slide  v-for="item in bannerList" :key="item.id" @click.native="clickBanner(item)">
            <img v-lazy="item.thumbUrl"  height="100%" width="100%" alt="">
          </swiper-slide>
          <div class="swiper-pagination swiper-pagination-white" slot="pagination"></div>
        </swiper>

        <!-- 搜索 -->
        <div class="search" @click.stop="showSearch = true" :style="{marginTop: paddingTop + 8 + 'px'}">
          <div class="searchLeft">
            <!-- <i class="fa fa-search" aria-hidden="true" style="paddingTop: 1px;"></i>&nbsp&nbsp&nbsp -->
            <img :src="icon.search" alt="" style="paddingTop: 2px; width:16px; height: 16px;">&nbsp;&nbsp;
            <p style="color: #e1e1e1">玩转黔东南</p>
          </div>
          <img @click.stop="toAI" :src="icon.robot" width="20px" height="20px" style="margin-right: 9px; padding-left: 10px;" />
        </div>
        
        <!-- 适游指数 -->
        <div class="recommend-rate" :style="{top: paddingTop + 50 + 'px'}">
          <p style="font-size: 10px; margin-bottom: 4px;">旅游指数</p>
          <p style="font-size: 13px">{{recommendRate}}</p>
        </div>
        <!-- 各种计数 -->
        <div class="nums">
          <p class="media">
            <span class="item" @click="mediaPicture">
              <div>
                <img :src="icon.picture"/>
              </div>
              <span>{{atlasCount}}</span>
            </span>


            <span class="item" @click="mediaVideo">
              <div>
                <img :src="icon.video"/>
              </div>
              <span>{{scenicFacilitiesCount}}</span>
            </span>


            <span class="item" @click="mediaEercast">
              <div>
                <img :src="icon['720']"/>
              </div>
              <span>{{panoramaCount}}</span>
            </span>
          </p>
          <!-- <p>720人正在黔东南旅游</p> -->
          <p @click="cartEntranceShowClick" class="product">
            <span>{{scenicCount}}个景区</span>
            <span>{{hotelCount}}家酒店</span>
            <span>{{featureCount}}种特产</span>
          </p>
        </div>

        <!-- 商城按钮 -->
        <div class="tool"  >
          <router-link :src="icon.drawingMap" width="30px" height="30px" style="margin-right: 8px;" to="/home/drawingMap" tag="img"/>
          <img ref="toolTransform" :src="icon.openMenu" width="30px" height="30px" @click="cartEntranceShowClick" />
        </div>
      </div>

      <!-- 商城入口 -->
      <div ref="cartEntranceWrapper" class="cartEntranceWrapper">
        <transition name="fade" enter-active-class="fadeIn" leave-active-class="fadeOut" @before-enter="cartEnter" @before-leave="cartLeave">
          <div class="cartEntrance" v-show="cartEntranceShow">
            <div class="cartEntranceItem" @click="goToScenicSpot">
              <img :src="icon.spot" alt="">
              <p>{{$t('tab.scenic')}}</p>
            </div>
            <div class="cartEntranceItem" @click="goToHotel">
              <img :src="icon.hotel" alt="">
              <p>{{$t('tab.hotel')}}</p>
            </div>
            <div class="cartEntranceItem" @click="goToSpecialLocalProduct">
              <img :src="icon.goods" alt="">
              <p>{{$t('tab.specialty')}}</p>
            </div>
            <div class="cartEntranceItem" @click="goToFood">
              <img :src="icon.food" alt="">
              <p>{{$t('tab.food')}}</p>
            </div>
            <div class="cartEntranceItem" @click="toBus">
              <img :src="icon.bus" alt="">
              <p>汽车票</p>
            </div>
            <div class="cartEntranceItem" @click="toTrain">
              <img :src="icon.train" alt="">
              <p>火车票</p>
            </div>
            <div class="cartEntranceItem" @click="toAirplane">
              <img :src="icon.airplane" alt="">
              <p>飞机票</p>
            </div>
            <router-link class="cartEntranceItem" to="/address/strategyList" tag="div">
              <img :src="icon.strategy" alt="">
              <p>攻略</p>
            </router-link>
          </div>
        </transition>
      </div>

      <!-- 初识 -->
      <div class="box qdn">
        <p class="title">
          <span>初识</span>
          <span class="intro">get打开黔东南的正确方式</span>
        </p>
        <scroll :data="addressList" direction="horizontal" eventPassthrough="vertical" class="horizontal-scroll">
          <div class="address-list" ref="addressList" slot="content">
            <div class="item" v-for="item in addressList" :key="item.id" @click.stop="selectArea(item)">
              <div class="img" v-lazy:backgroundImage="item.thumbUrl" data-qiniuType='w200'></div>
              <div class="subtitle">{{item.name}}</div>
              <div class="desc">{{item.desc}}</div>
            </div>
          </div>
        </scroll>
      </div>

      <!-- 城市新玩法 -->
      <div class="box new-play">
        <p class="title">探探
          <span class="intro">向左滑，指尖上的怦然心动</span>
        </p>
        <scroll :data="cityNewMethodListContent" direction="horizontal" eventPassthrough="vertical" class="horizontal-scroll">
          <div ref="newPlay" slot="content" style="height: 218px;">
            <div class="item" v-for="item in cityNewMethodListContent" :key="item.id">
              <div @click="goToNewPlay(item.contentId)">
                <div class="img" v-lazy:backgroundImage="item.thumbUrl + '-w200'">
                </div>
                <div class="txt">
                  <p class="subtitle">{{item.title}}</p>
                  <p class="desc">{{item.intro}}</p>
                </div>
              </div>
            </div>
          </div>
        </scroll>
      </div>

      <!-- 一起嗨 -->
      <div class="box users" v-show="userList.length > 0">
        <p class="title">一起嗨
          <span class="intro">寻找志同道合的朋友</span>
        </p>
        <scroll :data="userList" direction="horizontal" eventPassthrough="vertical" class="horizontal-scroll">
          <div ref="users" slot="content" style="height: 100px;">
            <div class="item" v-for="item in userList" :key="item.id" @click="toUSerDetail(item.id)">
              <img v-lazy="item.headUrl" width="50px" height="50px"/>
              <p class="nickname">{{item.nickname}}</p>
              <p class="btn">加好友</p>
            </div>
          </div>
        </scroll>
      </div>

      <!-- 黔城往事 -->
      <div class="qiCityPast box">
        <div class="title">
          <span>约吧</span>
          <span class="intro">第一次触碰</span>
        </div>
        <div class="qiCityPastImg" v-lazy:backgroundImage="cityNewMethodListContentOtherFirst.thumbUrl" @click="goToQiCityPast(cityNewMethodListContentOtherFirst.contentId, cityNewMethodListContentOtherFirst.title)">
          <div class="content">{{cityNewMethodListContentOtherFirst.title}}</div>
        </div>
        <!-- 黔城往事下横向滚动 -->
        <div class="contentWrapper">
          <scroll :data="cityNewMethodListContentOther" direction="horizontal" eventPassthrough="vertical" style="width: 100%;">
            <div slot="content" class="scrollRecom" ref="scrollRecomQiCity">
              <div class="recommend" v-for="item in cityNewMethodListContentOther" :key="item.id">
                <div @click="goToQiCityPast(item.contentId, item.title)" v-lazy:backgroundImage="item.thumbUrl + '-w200'" class="img">
                  <div class="content">{{item.title}}</div>
                </div>
              </div>
            </div>
          </scroll>
        </div>
      </div>

      <!-- 广告 -->
      <div class="qiCityPast box">
        <div class="title">
          <span>{{advertisingList.title}}</span>
        </div>
        <div class="qiCityPastImg" v-lazy:backgroundImage="advertisingList.thumbUrl" @click="goToQiCityPastPanorama(advertisingList.linkId, advertisingList.title)">
        </div>
      </div>


        <!-- 精美游记 -->
        <div class="box" v-if="travelsList.length > 0">
          <router-link tag="p" class="title" to="/address/travelsList">精美游记
            <span class="intro">发现不一样的美</span>
            <span class="more">更多<i class="fa fa-angle-right" aria-hidden="true"></i></span>
          </router-link>
          <ul class="travels">
            <router-link tag="li" v-for="(item, index) in travelsList" :key="index" class="item" :to="`/address/travels/${item.id}`">
              <div class="left" v-lazy:backgroundImage="item.firstImg"></div>
              <div class="right">
                <p class="travels-title">{{item.title}}</p>
                <div class="bottom">
                  <p class="userinfo">
                    <img class="avatar" v-lazy="item.userHeadUrl" @click.stop="toUSerDetail(item.publishUserId)" />
                    <span class="nickname">{{item.userName}}</span>
                  </p>
                  <p class="number">
                    <span><i class="icon iconfont icon-brower-count" style="font-size: 13px"/>{{item.browseCount}}</span>
                    <span><i class="icon iconfont icon-comment-count" style="font-size: 11px"/>{{item.commentCount}}</span>
                  </p>
                </div>
              </div>
            </router-link>
          </ul>
        </div>

      <div class="loading" v-if="this.showBottomLoding">
        <loading :title="loadingTip"></loading>
      </div>
    </div>
    <!-- 图集 -->
    <div v-transfer-dom>
      <previewer :list="atlas" :options="{loop: false}" @imgLoaded="preImgLoaded" ref="previewer"></previewer>
    </div>
    <div v-transfer-dom>
      <popup v-model="showAtlas" position="bottom" width="100%" height="100%" class="popup-wrapper">
        <div id="home-atlas">
          <v-header ref="atlasHead" :title="'黔东南-精美图集'" :handleClick="true" @back="showAtlas = false">
          </v-header>
          <div :style="{height: atlasScrollHeight + 'px'}" style="margin: 3.5px; overflow-x: hidden; overflow-y: scroll;" v-if="atlas.length > 0">
            <waterfall wrapperName="home-atlas" :calHeight="true" :gap="7" :imgsArr="atlas" :customWidth="itemWidth" @clickItem="previewAtlas" @scrollLoadImg="scrollLoadImg" loadingTip="正在加载精美图集...">
              <p class="atlas-name" slot="content" slot-scope="props">{{props.value.name}}</p>
            </waterfall>
          </div>
        </div>
      </popup>
    </div>
    <!-- 搜索 -->
    <global-search v-model="showSearch" type="all" :range="[0, 1, 2, 3, 4, 5, 6]" searchPlaceholder="玩转黔东南"></global-search>

    <router-view />
  </div>
</template>

<script>
import Scroll from '@/components/scroll/scroll'
import VHeader from '@/components/v-header/v-header'
import Waterfall from '@/components/waterfall/waterfall'
import Previewer from '@/components/previewer/previewer'
import Loading from '@/components/loading/loading'
import { isIphoneX } from '@/assets/js/brower'
import axios from '@/api/axiosApi'
import nativeBridge from '@/assets/js/nativeBridge'
import { mapGetters, mapMutations } from 'vuex'
import { getDistance } from '@/assets/js/amap'
import { handleBackMixin } from '@/assets/js/mixin'
import { localUser } from '@/assets/js/local'
import { XInput, Popup, TransferDom } from 'vux'
import { QINIU_PREFIX, AIRPLANE_H5_URL, TRAIN_H5_URL, BUS_H5_URL } from '@/api/config'
import GlobalSearch from '@/components/global-search/global-search'
import icon from '@/assets/json/homeIcon.json'
import defaultAvatar from '@/assets/img/default_avatar.png'
import { on } from '@/assets/js/dom'

// vue-awesome-swiper在全局没引入时，需要
import 'swiper/dist/css/swiper.css'
import {swiper, swiperSlide} from 'vue-awesome-swiper'

export default {
  name: 'Home',
  mixins: [handleBackMixin],
  data() {
    return {
      icon,
      strategyPageNum: 1,
      loadingTip: '正在加载...',
      showLoading: false,
      showBottomLoding: false,
      recommendRate: 60,
      addressList: [],  // 目的地列表
      newPlayList: [],  // 新玩法列表
      userList: [],  // 一起嗨
      allPopupModels: ['showAtlas', 'showSearch'],
      foodCategoryRecommendList: [],
      cartEntranceShow: false,
      cityNewMethodList: [],
      activityTitleOther: [],
      cityNewMethodListContent: [],
      cityNewMethodListContentOther: [],
      cityNewMethodListContentOtherFirst: [],
      travelsList: [],
      panoramaList: [],
      advertisingList: [],
      atlas: [],        // 图集
      hotelCount: 0,
      scenicCount: 0,
      featureCount: 0,
      atlasCount: 0,
      scenicFacilitiesCount: 0,
      panoramaCount: 0,
      showAtlas: false,
      showSearch: false,
      bannerList: [],
      defaultAvatar,
      swiperOption: {
        spaceBetween: 100,
        effect: 'fade',
        // loop: true,
        // loopAdditionalSlides: 2,
        // speed: 2000,
        // autoplay: {
        //   delay: 5000
        // },
        autoplayDisableOnInteraction: false,
        observer: true,
        observeParents: true,
        pagination: {
          el: '.swiper-pagination',
          bulletClass: 'top-bullet',
          bulletActiveClass: 'top-bullet-active',
          clickable: true,
          type: 'fraction'
        }
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      const scrollTop = vm.$store.getters.scrollTop
      if (vm.$refs.scrollWrapper && scrollTop.Home) {
        vm.$refs.scrollWrapper.scrollTop = scrollTop.Home
      }
    })
  },
  beforeRouteLeave (to, from, next) {
    this.$store.commit('SET_SCROLL_TOP', {Home: this.$refs.scrollWrapper.scrollTop})
    next()
  },
  directives: {
    TransferDom
  },
  components: {
    Scroll,
    XInput,
    Popup,
    VHeader,
    Waterfall,
    Previewer,
    GlobalSearch,
    swiper,
    swiperSlide,
    Loading
  },
  computed: {
    ...mapGetters([
      'position'
    ])
  },
  created() {
    this.statusBarHeight = 24
    if (isIphoneX()) {
      this.statusBarHeight = 34
      this.paddingTop = 34
      this.atlasScrollHeight = document.body.offsetHeight - (40 + 34)
      this.paddingBottom = 24
    } else {
      this.paddingTop = 26
      this.atlasScrollHeight = window.innerHeight - (40 + 24)
    }
    this.itemWidth = (window.innerWidth - 21) / 2

    const _self = this
    this._getRecommendRate()
    this._getAddressList()
    this._getUsers()
    this.getcityNewMethodList()
    this.getactivityTitleOther()
    // 获取广告数据
    this._getAdvertising()
    this._getScenicCount()
    this._getHotelCount()
    this._getFeatureCount()
    this._getAtlasCount()
    this._getScenicFacilitiesCount()
    this._getPanorama()
    this.getFoodCategoryRecommend()
    this._getBanner()
    this._getPlayStrategy()
    nativeBridge.getPosition(this, (arg) => {
      _self.setPosition([parseFloat(arg.longitude), parseFloat(arg.latitude)])
      _self.colDistance()
    })
  },
  mounted () {
    const ele = this.$refs.scrollWrapper
    on(ele, 'scroll', (e) => {
      var wScrollY = ele.scrollTop
      var wInnerH = this.$el.clientHeight
      var bScrollH = ele.scrollHeight
      if (wScrollY + wInnerH >= (bScrollH - 1) && !this.showLoading) {
        this.strategyPageNum++
        this._getPlayStrategy()
      }
    })
  },
  // watch: {
  //   '$route'(to, from) {
  //     if (to.name === 'Home') {
  //       this._getPlayStrategy()
  //     }
  //   }
  // },
  methods: {
    _getBanner() {
      axios.get(this, '/v1/banner/0', null, (data) => {
        data.forEach(item => {
          if (item.thumbUrl.indexOf(QINIU_PREFIX) > -1) {
            item.thumbUrl += '-w350'
          }
        })
        this.bannerList = data
      }, null, false)
    },
    _getAddressInfo() {
      // TODO 黔东南基础数据
    },
    _getAddressList() {
      axios.get(this, `/v1/address/1`, {
        pageSize: 50
      }, (data) => {
        if (data && data.length > 0) {
          this.addressList = data
          this.setAreaList(data)
          this.colDistance()
          this.$nextTick(() => {
            this.$refs.addressList.style.width = ((160 + 8) * this.addressList.length) + 'px'
          })
        }
      })
    },
    _getRecommendRate() {
      axios.get(this, `/v1/travelScore/ba062c32fdf611e7ba2d00163e0c27f8`, null, (data) => {
        this.recommendRate = data
      }, null, false)
    },
    _getNewPlayList() {
      setTimeout(() => {
        this.$refs.newPlay.style.width = (300 + 8) * this.cityNewMethodListContent.length + 'px'
      }, 200)
    },
    _getUsers() {
      axios.get(this, '/v1/recommendUser', {
        userId: localUser.get('id') || ''
      }, (data) => {
        data.forEach(item => {
          if (item.headUrl == null || item.headUrl === '') {
            item.headUrl = defaultAvatar
          }
        })
        this.userList = data
        this.$nextTick(() => {
          this.$refs.users.style.width = (87 * data.length - 10) + 'px'
        })
      })
    },
    colDistance() {
      if (this.position.length === 2 && this.addressList.length > 0) {
        let min = this.addressList[0]
        this.addressList.forEach((item, index) => {
          item.distance = getDistance(this.position, [item.longitude, item.latitude])
          if (index > 0 && item.distance < this.addressList[index - 1].distance) {
            min = item
          }
        })
        this.setCurrentArea(min)
      }
    },
    clickBanner (banner) {
      if (banner.type === 0) {
        if (banner.contentId) {
          this.$router.push(`/content/${banner.contentId}/${banner.name}`)
        }
      } else {
        if (banner.linkId) {
          const tmp = banner.linkId.split(':')
          if (tmp.length === 2) {
            switch (tmp[0]) {
              case 'scenic':
                this.$router.push(`/scenic/${tmp[1]}`)
                break
              case 'hotel':
                this.$router.push(`/hotel/${tmp[1]}`)
                break
              case 'feature':
                this.$router.push(`/specialLocalProductDetail/${tmp[1]}`)
                break
              case 'food':
                this.$router.push(`/foodDetailsOne/${tmp[1]}`)
                break
              case 'strategy':
                this.$router.push('/address/strategy/' + tmp[1])
                break
              case 'travels':
                this.$router.push('/address/travels/' + tmp[1])
                break
            }
          }
        }
      }
    },
    toAI() {
      this.$router.push('/chatAI')
    },
    selectArea(area) {
      this.setCurrentArea(area)
      this.$router.replace('/address')
    },
    ...mapMutations({
      setPosition: 'SET_POSITION',
      setAreaList: 'SET_AREA_LIST',
      setCurrentArea: 'SET_CURRENT_AREA',
      setCartTabIndex: 'SET_CART_TABINDEX'
    }),
    getFoodCategoryRecommend(recommend) {
      axios.get(this, `/v1/foodCategory`, { recommend: 1 }, (data) => {
        this.foodCategoryRecommendList = data.slice(0, 5)
      })
    },
    cartEnter(el) {
      this.$refs.cartEntranceWrapper.style.height = '180px'
    },
    cartLeave(el) {
      this.$refs.cartEntranceWrapper.style.height = 0
    },
    scrollLoadImg () {
      this.atlasPageNum++
      this._getAtlas()
    },
    mediaPicture() {
      this.showAtlas = true
      this.atlasPageNum = 1
      this._getAtlas()
    },
    mediaEercast() {
      this.$router.push('/home/panoramaSet/0')
    },
    mediaVideo() {
      this.$router.push('/home/videoSet/0')
    },
    cartEntranceShowClick() {
      if (this.cartEntranceShow) {
        this.$refs.toolTransform.style.transform = 'rotate(' + 0 + 'deg)'
        this.$refs.toolTransform.style.transition = 'all 0.6s ease-in-out'
      } else {
        this.$refs.toolTransform.style.transform = 'rotate(' + -180 + 'deg)'
        this.$refs.toolTransform.style.transition = 'all 0.6s ease-in-out'
      }
      this.cartEntranceShow = !this.cartEntranceShow
    },
    toHiPlay() {
      this.$router.push('/home/hiPlay')
    },
    toPlayStrategyDetail(id, type) {
      type === 1 ? this.$router.push('/address/strategy/' + id) : this.$router.push('/address/travels/' + id)
    },
    getcityNewMethodList() {
      axios.get(this, 'v1/activityTitle?type=0', null, (data) => {
        if (data && data.length > 0) {
          this.cityNewMethodList = data[0]
          this.getcityNewMethodListContent()
        }
      })
    },
    getactivityTitleOther() {
      axios.get(this, 'v1/activityTitle', { type: 1 }, (data) => {
        if (data && data.length > 0) {
          this.activityTitleOther = data[0]
          this.getcityNewMethodListContentOther()
        }
      })
    },
    getcityNewMethodListContent() {
      axios.get(this, `/v1/activityContent?belongActivity=${this.cityNewMethodList.id}`, null, (data) => {
        if (data && data.length > 0) {
          this.cityNewMethodListContent = data
          this._getNewPlayList()
        }
      })
    },
    getcityNewMethodListContentOther() {
      axios.get(this, `/v1/activityContent?belongActivity=${this.activityTitleOther.id}`, null, (data) => {
        if (data && data.length > 0) {
          this.cityNewMethodListContentOtherFirst = data[0]
          this.cityNewMethodListContentOther = data.slice(1)
          this.$refs.scrollRecomQiCity.style.width = (200 + 8) * this.cityNewMethodListContentOther.length + 'px'
        }
      })
    },
    _getPanorama() {
      axios.get(this, '/v1/panorama', null, (data, total) => {
        this.panoramaCount = total
        this.panoramaList = data[0]
      })
    },
    toUSerDetail (userId) {
      this.$router.push(`/user/archives/${userId}`)
    },
    _getPlayStrategy() {
      this.showLoading = true
      axios.get(this, '/v1/playStrategy', {
        pageSize: 8,
        pageNum: this.strategyPageNum,
        articleType: 0
      }, (data) => {
        this.showLoading = false
        if (data == null || data.length === 0) {
          if (this.strategyPageNum > 1) this.strategyPageNum--
          this.$vux.toast.text('没有更多游记攻略了', 'middle')
          this.showBottomLoding = false
          return
        }
        data.forEach(item => {
          if (item.userHeadUrl) {
            if (item.userHeadUrl.indexOf(QINIU_PREFIX) > -1) {
              item.userHeadUrl += '-bheader'
            }
          } else {
            item.userHeadUrl = defaultAvatar
          }
        })
        if (this.strategyPageNum > 1) {
          this.showBottomLoding = true
        }
        this.travelsList = this.travelsList.concat(data)
      }, () => { this.showLoading = false }, false)
    },
    _getAdvertising() {
      axios.get(this, '/v1/advertising', null, (data) => {
        if (data && data.length > 0) {
          this.advertisingList = data[0]
        }
      }, null, false)
    },
    _getHotelCount() {
      axios.get(this, '/v1/hotelCount', null, (data) => {
        this.hotelCount = data
      })
    },
    _getScenicCount() {
      axios.get(this, '/v1/scenicCount', null, (data) => {
        this.scenicCount = data
      })
    },
    _getFeatureCount() {
      axios.get(this, '/v1/featureProductCount', {}, (data) => {
        this.featureCount = data
      })
    },
    _getAtlasCount() {
      axios.get(this, '/v1/scenicAtlasCount', {}, (data) => {
        this.atlasCount = data
      })
    },
    _getScenicFacilitiesCount() {
      axios.get(this, '/v1/scenicFacilitiesCount', {}, (data) => {
        this.scenicFacilitiesCount = data
      })
    },
    // 获取图集
    _getAtlas() {
      if (this.requestAtlas) {
        return
      }
      this.requestAtlas = true
      axios.get(this, `/v1/atlasAndProduct`, {
        type: 1,
        pageSize: 3,
        numOfProduct: 4,
        pageNum: this.atlasPageNum
      }, (data) => {
        this.requestAtlas = false
        if (data.length === 0) {
          this.$vux.toast.text('没有更多数据了', 'middle')
          if (this.atlasPageNum > 1) this.atlasPageNum--
          return
        }
        let tmp = []
        data.forEach(item => {
          if (item && item !== '') {
            const imgs = item.atlas.split(';')
            imgs.forEach(img => {
              if (img.indexOf(QINIU_PREFIX) > -1) {
                img = img + '-w200'
              }
              tmp.push({
                src: img,
                name: item.name
              })
            })
          }
        })
        this.atlas = this.atlas.concat(tmp)
      }, () => {
        this.requestAtlas = false
      })
    },
    preImgLoaded() {
      this.$vux.loading.hide()
    },
    previewAtlas(item, index) {
      // 预览图片
      this.$vux.loading.show({
        text: '加载中...',
        position: 'absolute'
      })
      let temp = []
      this.atlas.forEach((img, i) => {
        temp.push({
          src: img
        })
      })
      this.selectAtlas = temp
      this.$nextTick(() => {
        this.$refs.previewer.show(index)
      })
    },
    goToNewPlay(contentId) {
      this.$router.push({
        path: `/home/homeContentManagement/${contentId}`,
        query: {
          title: this.cityNewMethodList.title
        }
      })
    },
    goToQiCityPast(contentId, title) {
      this.$router.push({
        path: `/home/homeContentManagement/${contentId}`,
        query: {
          title: title || '黔城往事'
        }
      })
    },
    goToQiCityPastPanorama(id, title) {
      this.$router.push({
        path: `/home/homeContentManagement/${id}`,
        query: {
          title: title || '广告'
        }
      })
    },
    goToScenicSpot() {
      this.$router.push({
        path: '/scenicList'
      })
    },
    goToHotel() {
      this.$router.push('/hotelPortal')
    },
    goToSpecialLocalProduct() {
      this.$router.push('/specialLocalProduct')
    },
    goToFood() {
      this.$router.push('/food')
    },
    toBus() {
      nativeBridge.openH5Page(BUS_H5_URL)
    },
    toTrain() {
      nativeBridge.openH5Page(TRAIN_H5_URL)
    },
    toAirplane() {
      nativeBridge.openH5Page(AIRPLANE_H5_URL)
    },
    goToContent (item) {
      this.$router.push(`/content/${item.contentId}/${item.name}`)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
@import '~@/assets/css/mixins.styl'

.atlas-name
  background-image url(../../assets/img/mask.png)
  background-size cover
  no-wrap()
  font-size 13px
  color #fff
  padding 0 8px
  height 50px
  line-height 72px
  position absolute
  bottom 0
  left 0
  right 0
.loading
  height 40px
  line-height 40px
  text-align center
  color #333
.home-wrapper
  height 100%
  background $color-background
.scroll-wrapper
  height 100%
  -webkit-overflow-scrolling touch
  -webkit-box-sizing border-box
  overflow-x hidden
  overflow-y auto
// 公共样式
.title
  position relative
  font-size $font-size-large
  color $color-text-1
  margin-bottom 15px
  font-weight 900
  no-wrap()
  .intro
    font-size 13px
    color $color-text-4
    padding-left 12px
    margin-left 9px
    border-left 1px solid $color-divider
    font-weight normal
  .more
    float right
    font-size 13px
    color $color-text-4
    padding-top 4px
    font-weight normal
.subtitle
  font-size 15px
  color #333
  margin-bottom 8px
  line-height 1
  font-weight bold
.desc
  font-size 14px
  color #999
  overflow hidden
  no-wrap()
.box
  padding 20px 15px
  background #fff
  margin-bottom $margin-bottom-module
  &:last-child
    margin-bottom 0
.horizontal-scroll
  overflow unset
// 模块样式
.top
  position relative
  width 100vw
  height 100vw
  background-repeat no-repeat
  background-size 100% 100%
  background-position center
  .recommend-rate
    position absolute
    top 34px
    right 15px
    z-index 10
    text-align center
    color #fff
    border-radius 3px
    padding 8px
    line-height 1
    background-color $color-layer
  .search
    position absolute
    top 5%
    left 50%
    z-index 10
    transform translate(-50%, -50%)
    display flex
    justify-content space-between
    align-items center
    color #fff
    border 1px solid rgba(255, 255, 255, 0.4)
    background rgba(0, 0, 0, 0.3)
    width 85%
    height 32px
    line-height 42px
    border-radius 30px
    padding 0 10px 0 18px
    margin 10px 0
    font-size 16px
    .searchLeft
      display flex
      align-items center
  .nums
    position absolute
    left 15px
    right 15px
    bottom 20px
    z-index 10
    color #fff
    font-size 16px
    .media
      display flex
      align-items center
      .item
        display flex
        align-items center
        margin-right 12px
        font-size 14px
        extend-y-click()
        div
          background $color-layer
          border-radius 50%
          width 24px
          height 24px
          line-height 30px
          text-align center
          margin-right 4px
        img
          height 12px
          margin-bottom 2px
    .product
      line-height 1
      font-size 12px
      span
        border-right 1px solid rgba(255, 255, 255, 0.6)
        padding 0 8px
        &:first-child
          padding-left 0
        &:last-child
          border-right none
    p
      margin-top 4px
  .tool
    position absolute
    right 15px
    bottom 20px
    z-index 10
    display flex
.top-swiper
  position absolute
  top 0
  left 0
  right 0
  bottom 0
  .swiper-pagination
    bottom 136px
    color #fff
    font-size 18px
.address-list
  position relative
  width 630px
  height 173px
  .item
    width 160px
    height 173px
    margin-right 8px
    border-radius 5px
    overflow hidden
    float left
    color #fff
    .img
      width 160px
      height 120px
      border-radius 5px
      margin-bottom 12px
      background-size cover
      background-position 50% 50%
    .bg
      width 100%
      color $color-text-1
      font-size $font-size-title
.qdn
  position relative
  z-index 2
.new-play
  .item
    background #fff
    width 300px
    height 218px
    margin-right 8px
    border-top none
    float left
    border-radius 4px
    overflow hidden
    box-shadow 0 0 12px #dfdfdf
    position relative
    z-index 1
    .img
      width 100%
      height 150px
      background-repeat no-repeat
      background-size cover
      background-position 50% 50%
    .txt
      padding 0 16px
      margin-top 12px
      margin-bottom 16px
      line-height 1.4
    .type
      width 26px
      height 26px
      position absolute
      right 10px
      bottom 50px
.users
  .item
    float left
    text-align center
    width 75px
    padding 0 6px
    img
      border 1px solid rgba(215, 215, 215, 0.8)
      border-radius 50%
    .nickname
      font-size 13px
      line-height 1
      margin-top -2px
      margin-bottom 4px
      no-wrap()
    .btn
      display inline-block
      background $color-theme
      color #fff
      line-height 21px
      height 21px
      width 56px
      border-radius 3px
      font-size 13px
      extend-click()
      &:focus, &:active, &:hover
        color $color-theme-1
    &:first-child
      padding-left 0
    &:last-child
      padding-right 0
  &:after
    content ''
    display block
    clear both
.contentWrapper
  margin-top 8px
.scrollRecom
  .recommend
    margin-right 8px
    display inline-block
    .img
      width 200px
      height 100px
      background-size cover
      background-position 50% 50%
      position relative
      box-shadow 0 0 12px #dfdfdf
      border-radius 4px
    .content
      color #fff
      position absolute
      bottom 10px
      left 10px
.qiCityPast
  .qiCityPastImg
    height 180px
    background-size cover
    background-position 50% 50%
    border-radius 4px
    overflow hidden
    position relative
    .content
      color #fff
      position absolute
      bottom 10px
      left 10px
.travels
  li
    padding 16px 0
    border-bottom 1px solid rgba(0, 0, 0, 0.1)
    display flex
    justify-content space-between
    &:first-child
      padding-top 0
    &:last-child
      border-bottom none
      padding-bottom 0
    .left
      width 44%
      height 117px
      border-radius 2px
      background-size cover
      background-repeat no-repeat
      background-position center
    .right
      width calc(56% - 12px)
      height 117px
      display flex
      align-content space-between
      flex-wrap wrap
    .travels-title
      font-size 15px
      color #333
      line-height 1.4
      no-wrap-n(2)
      width 100%
    .userinfo
      display flex
      align-content space-between
      height 24px
      margin-bottom 8px
      line-height 24px
    .avatar
      width 24px
      height 24px
      border-radius 50%
      margin-right 4px
    .nickname
      font-size 11px
      color #333
    .bottom
      width 100%
    .number
      color #666
      font-size 11px
      line-height 1
      span
        margin-right 8px
      i
        margin-right 4px
.cartEntranceWrapper
  height 0
  transition height 0.4s linear
  background #fff
  margin-bottom $margin-bottom-module
  .fadeIn, .fadeOut
    animation-duration 0.4s
    animation-delay 0.1s
.cartEntrance
  display flex
  flex-wrap wrap
  align-content flex-start
  .cartEntranceItem
    width 25%
    text-align center
    margin-top 20px
    margin-bottom 10px
    img
      display inline-block
      width 24px
      height 24px
    p
      line-height 1
      margin-top 1.5px
</style>

<style lang="stylus">
.home-wrapper
  .top-bullet
    display inline-block
    background rgba(255, 255, 255, 0.5)
    width 6px
    height 6px
    border-radius 50%
    margin-right 8px
    &:last-child
      margin-right 0
  .top-bullet-active
    background #fff
</style>
